<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大疆EP机器人Python编程课程</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 40px 20px;
            text-align: center;
            border-radius: 0 0 20px 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo-icon {
            margin-right: 15px;
            font-size: 2.8rem;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 20px;
        }
        
        .intro {
            max-width: 800px;
            margin: 0 auto 30px;
            font-size: 1.1rem;
        }
        
        .course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .course-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }
        
        .card-header {
            background: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .card-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .card-content {
            color: #555;
            margin-bottom: 20px;
        }
        
        .resources {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            font-size: 0.9rem;
        }
        
        .resources h4 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .resources ul {
            list-style-type: none;
        }
        
        .resources li {
            padding: 5px 0;
            border-bottom: 1px dashed #ddd;
        }
        
        .resources li:last-child {
            border-bottom: none;
        }
        
        .testimonial {
            background: white;
            border-radius: 12px;
            padding: 30px;
            margin: 40px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-left: 5px solid #3498db;
        }
        
        .testimonial-text {
            font-style: italic;
            font-size: 1.1rem;
            margin-bottom: 20px;
            color: #444;
        }
        
        .testimonial-author {
            font-weight: bold;
            color: #2c3e50;
            text-align: right;
        }
        
        footer {
            text-align: center;
            padding: 30px 0;
            color: #7f8c8d;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
            margin-top: 40px;
        }
        
        .cta-button {
            display: inline-block;
            background: #e74c3c;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            margin: 20px 0;
            transition: background 0.3s ease;
        }
        
        .cta-button:hover {
            background: #c0392b;
        }
        
        @media (max-width: 768px) {
            .course-grid {
                grid-template-columns: 1fr;
            }
            
            .logo {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <span class="logo-icon">🤖</span>
                <span>大疆EP机器人Python编程课程</span>
            </div>
            <div class="subtitle">为人工智能与机器人项目打下基础 | 适合初中阶段学生</div>
            <p class="intro">本课程使用EP机器人作为编程实验载体，学习Python SDK应用，涵盖底盘控制、机械臂、传感器、多机编队等核心内容，共8课时。</p>
            <a href="#courses" class="cta-button">查看课程详情</a>
        </div>
    </header>

    <div class="container">
        <section class="testimonial">
            <p class="testimonial-text">"大疆EP机器人Python课程为高年级学生和有基础的学员提供了更高一层的学习环境，内容分类详细，逻辑清晰，每个阶段都配有视频和代码实例，对比着ppt和源代码很好上手。"</p>
            <p class="testimonial-author">— 西安恐龙岛编程 曹老师</p>
        </section>

        <h2 id="courses" style="text-align: center; margin: 40px 0 30px; color: #2c3e50;">课程大纲 (8课时)</h2>
        
        <div class="course-grid">
            <div class="course-card">
                <div class="card-header">
                    <h3>第1课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">环境搭建与SDK入门</h4>
                    <p class="card-content">Python环境配置、EP SDK安装、基础通信测试、第一个机器人程序。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>环境搭建PPT与文档</li>
                            <li>SDK使用综述视频</li>
                            <li>实验1视频</li>
                            <li>robot_1.zip源代码</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="course-card">
                <div class="card-header">
                    <h3>第2课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">底盘控制</h4>
                    <p class="card-content">控制机器人移动：前进、后退、转向、速度控制、定时运动。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>底盘控制PPT与文档</li>
                            <li>实验2视频</li>
                            <li>robot_2.zip源代码</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="course-card">
                <div class="card-header">
                    <h3>第3课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">机械臂控制</h4>
                    <p class="card-content">机械臂初始化、关节控制、夹爪操作、抓取动作编程。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>机械臂控制PPT与文档</li>
                            <li>实验3视频</li>
                            <li>robot_3.zip源代码</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="course-card">
                <div class="card-header">
                    <h3>第4课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">传感器与感知</h4>
                    <p class="card-content">使用红外、视觉、陀螺仪等传感器获取环境数据，实现避障、巡线等功能。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>传感器与感知PPT与文档</li>
                            <li>实验4视频</li>
                            <li>robot_4.zip源代码</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="course-card">
                <div class="card-header">
                    <h3>第5课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">控制技术</h4>
                    <p class="card-content">结合底盘、机械臂、传感器完成综合任务（如抓取并搬运物体）。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>控制技术PPT与文档</li>
                            <li>实验5视频</li>
                            <li>robot_5.zip源代码</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="course-card">
                <div class="card-header">
                    <h3>第6课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">视觉识别入门</h4>
                    <p class="card-content">使用摄像头进行颜色识别、标签识别、人脸检测等基础视觉任务。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>扩展视觉识别材料</li>
                            <li>示例代码与项目</li>
                            <li>实验指导文档</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="course-card">
                <div class="card-header">
                    <h3>第7课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">多机通信与协同</h4>
                    <p class="card-content">多台EP机器人之间的通信、指令同步、编队基础。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>多机编队PPT与文档</li>
                            <li>实验6视频</li>
                            <li>robot_6.zip源代码</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="course-card">
                <div class="card-header">
                    <h3>第8课</h3>
                </div>
                <div class="card-body">
                    <h4 class="card-title">项目实战：多机编队</h4>
                    <p class="card-content">分组完成一个多机协同项目（如协同搬运、编队舞蹈、对抗赛等）。</p>
                    <div class="resources">
                        <h4>课程资源</h4>
                        <ul>
                            <li>项目指导书</li>
                            <li>示例代码</li>
                            <li>评分标准与反馈表</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section class="testimonial">
            <p class="testimonial-text">"从2020年大疆EP一推出，就开始关注，去年7月份就迫不及待的引进了。除了机甲大师青少年的比赛外，本身的图形化编程+python+SDK也是符合机构长线教学的需要。丰富的教学体系，课件中生动有趣的图表、视频、课堂实验，结合本身就酷到没边的EP设备，希望可以让孩子们一直有劲的学下去。"</p>
        </section>
    </div>

    <footer>
        <div class="container">
            <p>大疆教育机甲大师系列课程 - Python应用与机器人</p>
            <p>© 2023 大疆教育 - 所有权利保留</p>
        </div>
    </footer>
</body>
</html>